<template>
    <heads title="个人中心"></heads>
    <div class="top" style="display: flex;align-items: center;">
        <img style="width: 50px;
        height: 50px;border-radius: 50%;" src="../../../assets/11.webp" alt="">
        <p style="color: #fff;">账号管理</p>
    </div>
    <van-cell title="我的订单" />

    <van-grid>
        <van-grid-item icon="photo-o" text="待付款" />
        <van-grid-item icon="photo-o" text="待发货" />
        <van-grid-item icon="photo-o" text="待收货" />
        <van-grid-item icon="photo-o" text="已完成" />
    </van-grid>

    <div style="display: flex;align-items: center;">
        <van-icon name="location-o" size="2.5rem" />
        <van-cell title="收货地址" />
    </div>
     <div style="display: flex;align-items: center;">
       <van-icon name="hot-o" size="2.5rem" />
        <van-cell title="我的资金劵" />
     </div>

      <div style="display: flex;align-items: center;">
       <van-icon name="hot-o" size="2.5rem" />
          <van-cell title="我的商品劵" />
     </div>
    <div style="display: flex;align-items: center;">
        <van-icon name="notes-o" size="2.5rem" />
        <van-cell title="我的发票" />
    </div>
    <div style="display: flex;align-items: center;">
        <van-icon name="newspaper-o" size="2.5rem" />
        <van-cell title="账户信息" />
    </div>
    <div style="display: flex;align-items: center;">
        <van-icon name="friends-o" size="2.5rem" />
        <van-cell title="关于我们" />
    </div>

</template>

<script setup>
import { ref } from "vue"


import heads from '@/components/head.vue';
</script>

<style lang="scss" scoped>
.top {
    width: 100%;
    height: 20%;
    background-color: blue;
}
</style>